<template>
    <div>
        <div class="goods-item">
            <img :src="item.goodsImg[0].url" alt="">
            <div class="message">
                <div class="name">{{this.$store.state.systemMessage.brand}}</div>
                <div class="desc">{{ item.name }}</div>
                <div class="price">￥{{ item.price }}</div>
            </div>

        </div>
    </div>
</template>

<script>
    import Shade from "../../../components/common/shade/Shade";
    export default {
        name: "GoodsItem",
        props: {
          item: {
              type: Object,
              default: {}
          }
        },
        data() {
            return {
                url: ''
            }
        },
        computed: {

        },
        components: {
            Shade
        }
    }
</script>

<style scoped>
    .goods-item {
        width: 150px;
        height: 220px;
        margin: 1em;
        text-align: left;
        line-height: 1.5em;
        font-size: 12px;
        cursor: pointer;
        border: 1px solid rgba(0,0,0,.1);
        display: flex;
        justify-content: space-between;
        flex-flow: column nowrap;
    }
    .goods-item div > *:hover {
        color: rgb(255,69,0);
    }
    .goods-item div {
    }
    img  {
        width: 100%;
        height: 160px;
    }
    img:hover {
        transform: scale(1.2, 1.2);
        border: 1px solid #cccccc;
    }
    .name {
        font-weight: bold;
    }
    .goods-item .desc {
        width: 160px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .price {
        color: red;
    }

</style>